<template>
  <div style="width: 1200px" @click="overList">
    <div style="width: 1200px" class="loglSerch">
      <div class="shopLogo" style="width: 250px">
        <img src="../views/imgs/logo2.jpg" alt="" srcset="" />
      </div>

      <div class="shopInput" style="width: 400px">
        <el-input v-model="select.name" placeholder="请输入内容"></el-input>
      </div>
      <div class="shopSerch">
        <el-button type="primary" icon="el-icon-search" @click="selectname"
          >搜索</el-button
        >
      </div>

      <div class="shopLink">
        <el-link
          @click="on(item)"
          target="blank"
          class="Link"
          v-for="item of List"
          :key="item.id"
          >{{ item.classifyname }}</el-link
        >
      </div>
    </div>

    <div class="shopMain" style="width: 1200px; background-color: white">
      <div class="Cascader">
        <div :model="classifyname" v-for="item in classifyname" :key="item.id">
          <el-tag style="margin-top: 5px"
            ><span @mouseover="openList(item)" style="font-size: 16px">{{
              item.classifyname
            }}</span></el-tag
          >
        </div>
      </div>

      <div class="Rotationhart">
        <el-carousel
          :interval="5000"
          arrow="always"
          style="height: 350px; width: 1103px"
          
        >
          <el-carousel-item v-for="item in List2" :key="item.id" name="200">
            <img
              :src="'http://localhost:5000/files/' + item.imageId"
              class="image1"
              @click="click(item)"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div>
      <el-card id="classify1" @mouseover="openList" @click="overList">
        <el-scrollbar style="height: 300px; width: 600px">
          <table>
            <tr>
              <td :model="subClass" v-for="item2 in subClass" :key="item2.id">
                <el-button type="text" @click="gotoGoods(item2)">{{
                  item2.subclassifyfyname
                }}</el-button>
              </td>
            </tr>
          </table>
        </el-scrollbar>
      </el-card>
    </div>

    <div class="youhaohuo" style="width: 1200px; background-color: white">
      <h2 style="margin-left: 90px">精选好货 <el-tag>全名口碑</el-tag></h2>

      <el-row>
        <el-col
          :span="8"
          v-for="(item, id) of tableData"
          :key="id"
          :offset="item.index > 0 ? 2 : 0"
        >
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            style="width: 200px; height: 265px"
            class="youhaohuoHover"
          >
            <img
              :src="'http://localhost:5000/files/' + item.imageId"
              class="image"
            />
            <div style="panding: 0px">
              <el-button type="text" class="button" @click="gotoDetails(item)"
                >点我购买</el-button
              >
              <div class="bottom clearfix">
                <span>￥{{ item.price }}</span>
                <br />
                <span>{{ item.spuname }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div
      class="PopularGoods"
      style="width: 1202px; height: 130px; background-color: white"
    >
      <div class="PopularGoods1">
        <img src="../views/imgs/1.webp" alt="" />
      </div>
      <div class="PopularGoods2">
        <img src="../views/imgs/2.webp" alt="" />
      </div>
      <div class="PopularGoods3">
        <img src="../views/imgs/3.webp" alt="" />
      </div>
    </div>

    <div class="GuessULike" style="width: 1200px; background-color: white">
      <h2 style="margin-left: 90px">
        猜你喜欢 <el-tag style="color: OrangeRed">个性推荐</el-tag>
      </h2>

      <el-row>
        <el-col
          :span="8"
          v-for="(item, id) of List1"
          :key="id"
          :offset="item.index > 0 ? 2 : 0"
        >
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            style="width: 200px; height: 265px"
            class="youhaohuoHover"
          >
            <img
              :src="'http://localhost:5000/files/' + item.imageId"
              class="image"
            />
            <div style="panding: 0px">
              <el-button type="text" class="button" @click="gotoDetails(item)"
                >点我购买</el-button
              >
              <div class="bottom clearfix">
                <span>￥{{ item.price }}</span>
                <br />
                <span>{{ item.spuname }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getList,
  List,
  List1,
  List2,
  getClassify,
  getSubclass,
} from "../api/store";
export default {
  data() {
    return {
      input: "",
      tableData: [],
      stores: {
        price: 0,
        spuname: "",
      },
      id: "",
      imageId: "",
      classifyname: [],
      subClass: [],
      List: [],
      List1: [],
      List2: [],
      select: {
        name: "",
      },
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    overList() {
      var list = document.getElementById("classify1");
      list.style.display = "none";
    },
    openList(item) {
      var list = document.getElementById("classify1");
      list.style.display = "block";

      getSubclass(item.id)
        .then((res) => {
          this.subClass = res.data;
          console.log(this.subClass);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    gotoDetails(item) {
      this.$router.push("/details?id=" + item.id);
      console.log(item.id);
    },
    on(item) {
      console.log(item);
      this.$router.push(
        "/classifyGoods?id=" + item.id + "&name=" + item.classifyname
      );
    },
    click(item) {
      console.log(item);
      this.$router.push("/details?id=" + item.id);
    },
    gotoGoods(item2) {
      console.log(item2);
      this.$router.push(
        "/goods?id=" + item2.classifyId + "&name=" + item2.subclassifyfyname
      );
    },
    selectname() {
      if (this.select.name == "") {
        this.$message({
          message: "请输入商品名称",
          type: "warning",
        });
      } else {
        console.log(this.select.name);
        this.$router.push("/selectGoods?supname=" + this.select.name);
      }
    },
  },
  mounted() {
    getList(this.stores)
      .then((data) => {
        let res = data.data;
        console.log(res);
        this.tableData = res.spu;
        // this.tableData.push(res.image[0].imageId)
        console.log(this.tableData);

        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
    List().then((data) => {
      this.List = data.data;
      console.log(this.List);
    });
    List1().then((data) => {
      this.List1 = data.data;
      console.log(this.List1);
    });
    List2().then((data) => {
      this.List2 = data.data;
      console.log(this.List12);
    });

    getClassify()
      .then((data) => {
        let res = data.data;
        this.classifyname = res;
        console.log(this.classifyname);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped>
.shopLogo {
  margin-left: 250px;
}
.shopInput {
  margin-left: 600px;
  float: left;
  margin-top: -65px;
}
.shopSerch {
  margin-left: 1010px;
  margin-top: -65px;
}
.shopLink {
  margin-top: 55px;
  margin-left: 600px;
  color: black;
}
.Link {
  margin-top: -110px;
  margin-left: 40px;
}
.shopMain {
  margin-left: 100px;
  margin-top: 10px;
}
.loglSerch {
  background-color: #cccccc;
  margin-left: 100px;
}
/* .shopCascade {
  margin-top: 100px;
} */
.Cascader {
  /* padding: 0px;
  margin-top: 100px; */
  width: 58px;
  height: 300px;
  float: left;
}
#classify1 {
  width: 600px;
  height: 300px;
  position: absolute;
  left: 187px;
  top: 212px;
  z-index: 10000;
  display: none;
}

.CascaderC {
  width: 58px;
  height: 300px;
  float: left;
}
.classify1 td {
  margin-left: 5px;
  margin-top: -5px;
}

/* 走马灯 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.Rotationhart {
  margin-left: 97px;
  margin-top: -35px;
}

.youhaohuo {
  margin-left: 30px;
  margin-top: 50px;
}
.el-card__body {
  width: 200px;
  height: 180px;
}
.image {
  width: 200px;
  height: 180px;
}
.el-col-8 {
  width: 12.5%;
  margin-top: 2%;
}

.GuessULike {
  margin-left: 30px;
  margin-top: 50px;
}

/* .el-card:hover {
  margin-top: -1px;
} */

.GuessULikeHover:hover {
  margin-top: -5px;
}
/* .youhaohuoHover:hover{
  margin-top: -5px;
} */
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}
.el-col {
  border-radius: 4px;
  align-items: stretch;
  margin-bottom: 40px;
  margin-left: 90px;
}
/*此处是为了将原有的横向滚动条隐藏，原本的滚动条很丑*/
.el-scrollbar__wrap {
  overflow-x: hidden;
}

.PopularGoods {
  margin-left: 100px;
}
.PopularGoods1 {
  width: 375px;
  height: 130px;
  float: left;
}
.PopularGoods2 {
  width: 375px;
  height: 130px;
  float: left;
  margin-left: 38px;
}
.PopularGoods3 {
  width: 375px;
  height: 130px;
  float: left;
  margin-left: 38px;
}
.PopularGoods1:hover {
  margin-top: -5px;
}
.PopularGoods2:hover {
  margin-top: -5px;
}
.PopularGoods3:hover {
  margin-top: -5px;
}
img {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img1 {
  width: 50%;
  height: 50%;
}
</style>